<template>
  <div class="my-order-main">
    <nav>
      <div class="fl"><span @click='tabToggle("typeA");' v-bind:class="{active : (type == 'typeA')}">全部</span></div>
      <div class="fl"><span @click='tabToggle("typeB");' v-bind:class="{active : (type == 'typeB')}">待付款</span></div>
      <div class="fl"><span @click='tabToggle("typeC");' v-bind:class="{active : (type == 'typeC')}">待发货</span></div>
      <div class="fl"><span @click='tabToggle("typeD");' v-bind:class="{active : (type == 'typeD')}">待收货</span></div>
      <div class="fl"><span @click='tabToggle("typeE");' v-bind:class="{active : (type == 'typeE')}">待评价</span></div>
    </nav>
    <div class="order-list">
      <ul v-if="type == 'typeA'">
        <li>
          <div class="store-msg clear">
            <img src="../assets/image/ico_Shop2@2x.png" class="store-icon fl"/>
            <p class="store-name fl">乐町旗舰店 〉</p>
            <p class="pay-tips fr">等待买家付款</p>
          </div>
          <div class="product-bar clear">
            <img src="" class="product-img fl"/>
            <div class="product-msg fl">
              <p class="product-name">乐町2017夏季新款女装绿色短款刺绣宽松短袖T恤女夏韩版纯色上衣</p>
              <p class="product-size clear"><span class="fl">颜色：;</span><span class="fl">尺码：</span></p>
            </div>
            <div class="product-price fr">
              <p class="store-price">¥</p>
              <p class="market-price">¥</p>
              <p class="product-num">×</p>
            </div>
          </div>
          <div class="product-bar clear">
            <img src="" class="product-img fl"/>
            <div class="product-msg fl">
              <p class="product-name">乐町2017夏季新款女装绿色短款刺绣宽松短袖T恤女夏韩版纯色上衣</p>
              <p class="product-size clear"><span class="fl">颜色：;</span><span class="fl">尺码：</span></p>
            </div>
            <div class="product-price fr">
              <p class="store-price">¥</p>
              <p class="market-price">¥</p>
              <p class="product-num">×</p>
            </div>
          </div>
          <div class="buttonbar clear">
            <button class="payment fr">付款</button>
            <button class="cancel-order fr">取消订单</button>
            <button class="contact-saler fr">联系卖家</button>
          </div>
        </li>
      </ul>
      <ul class="nav-container-list" v-if="type == 'typeB'">
        2
      </ul>
      <ul class="nav-container-list" v-if="type == 'typeC'">
        3
      </ul>
    </div>
    <!--联系商家弹窗-->
    <div class="popup-bg hidden">
      <div class="popup">
        <p class="popup-text">是否联系商家？</p>
        <p class="popup-tel">18678912345</p>
        <div class="button-bar clear">
          <span class="fl">取消</span>
          <span class="fl call">呼叫</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import { InfiniteScroll } from 'mint-ui';
  Vue.use(InfiniteScroll);

  export default {
    data () {
        return {
          type : 'typeA',
          searchText:'请输入搜索关键词',
          storeName:'tammytangs旗舰店',
    }},
    name: 'app',
    methods:{
      tabToggle:function(tabText){
        this.type= tabText;
      },
      loadMore() {
//        this.loading = true;
//        setTimeout(() => {
//          let last = this.list[this.list.length - 1];
//          for (let i = 1; i <= 10; i++) {
//            this.list.push(last + i);
//          }
//          this.loading = false;
//        }, 2500);
      }
    }
  }
</script>
<style lang="scss">
  .my-order-main{
    nav{
      width: 100%; height: 0.6rem; border-bottom: 0.2rem solid #f4f5f5; background: #fff;
      div{
        width: 20%;
        span{display: block; width: 0.8rem; height: 0.58rem; margin: 0 auto; font-size: 0.24rem; text-align: center; line-height: 0.58rem; color: #666;}
        .active{border-bottom: 0.02rem solid #ff365d; color: #ff365d;}
      }
    }
    .order-list{
      ul li{
        width: 100%; background: #fff;
        +li{border-top: 0.2rem solid #f4f5f5;}
      }
    }
    .store-msg{
      width: 100%; height: 0.64rem;
      .store-icon{display: block; width: 0.4rem; height: 0.4rem; padding: 0.12rem 0.14rem 0.12rem 0.26rem;}
      .store-name{ font-size: 0.24rem; line-height: 0.64rem; color: #353535;}
      .pay-tips{padding-right:0.3rem; font-size: 0.24rem; line-height: 0.64rem; color: #ff365d;}
    }
    .product-bar{
      width: 100%; height: 1.74rem; background: #f4f5f5;
      +.product-bar{border-top:0.04rem solid #fff;}
      .product-img{display: block; width: 1.34rem; height: 1.34rem; padding: 0.2rem 0.16rem 0.2rem 0.3rem;}
      .product-msg{
        padding-top:0.16rem;
        .product-name{ width: 3.92rem; font-size: 0.24rem; line-height: 0.36rem; color: #353535; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all;}
        .product-size{
          span{ display: block; font-size: 0.2rem; line-height: 0.4rem; color: #999;}
        }
      }
      .product-price{
        padding:0.16rem 0.3rem 0 0;
        .store-price{font-size: 0.28rem; line-height: 0.36rem; color: #353535;}
        .market-price{font-size: 0.24rem; text-decoration: line-through; line-height: 0.4rem; color: #999;}
        .product-num{font-size: 0.24rem;line-height: 0.36rem; color: #666;}
      }
    }
    .buttonbar{
      padding: 0.2rem 0.3rem 0.2rem 0.3rem; background:#fff;
      button{
        display: block; width: 1.6rem; height: 0.5rem; border:0; background:none; font-size:0.24rem; text-align:center; line-height:0.5rem;
        +button{margin-right: 0.3rem;}
      }
      .payment{ background: #ff365d; color: #fff;}
      .cancel-order,.contact-saler{width:1.56rem; height:0.46rem; border: 0.02rem solid #666; color: #666;}
    }

    .popup-bg{width: 100%; height: 100%; background: rgba(0,0,0,0.2); position: fixed; left: 0; top: 0; z-index: 20;}
    .popup{
      margin: 4.78rem auto 0; width: 6rem; height: 3.78rem; border-radius: 0.2rem; background:#fff; background-size: 6rem 3.78rem;
      .popup-text{padding:0.94rem 0 0.54rem; font-size: 0.32rem; text-align: center; line-height: 0.32rem; color: #333;}
      .popup-tel{font-size: 0.36rem; text-align: center; line-height: 0.32rem; color: #333;}
      .button-bar{
        width: 4.8rem; height: 0.9rem; margin: 0.74rem 0.6rem 0 0.6rem; border-top: 1px solid #ddd;
        span{
          display:block; width:2.4rem; height:0.9rem; font-size:0.28rem; line-height:0.9rem; text-align:center; color:#666; background:#fff;
        }
        .call{ color: #ff365d;}
      }
    }
  }

</style>
